﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <style type="text/css">
	.map-card{
		width:227px;background-color:#f8faff;
	}
	.map-card .coverphoto{display: inline-block;width:227px;height:150px;}
	.map-card table{border-collapse: collapse;width: 100%;height:40px;border:none;overflow: hidden;background-color: #fff;}
	.map-card dt{font-size: 16px;text-align: center;color: #323232;height:46px;line-height: 46px;}
	.map-card dl{padding:0px 20px 20px 20px;}
	.map-card .yellow{padding-left:10px;color:#f26622;}
	.map-card .rank{color:#959595; }
	.map-card .rank img{vertical-align: -7px; margin-right:5px;width: 14px;height:18px;}
	.map-card .detail{color:#636363;line-height:18px; height:36px;overflow: hidden; }
	.map-card dl{border-bottom:#ececec solid 1px;background-color:#f8fbff;}
	.map-card td{height:18px;line-height: 18px;vertical-align: middle; text-align: center;}
	.map-card td a{color:#636363;display: block;position: relative;height:18px;line-height: 18px;}
	.map-card td a:after{position: absolute;content:"";height:18px;background-color: #ececec;width:1px;right:-1px;top:0px;}
	</style>

</head>
<body>
    <label id="err"></label>
    <div id="map_canvas" style="height:100%;width:100%;"></div>



    <script type="text/javascript">

        //World Geodetic System ==> Mars Geodetic System
        //translate from https://on4wp7.codeplex.com/SourceControl/changeset/view/21483#353936
        var WGS84_to_GCJ02 = function () { }

        WGS84_to_GCJ02.prototype.a = 6378245.0;
        WGS84_to_GCJ02.prototype.ee = 0.00669342162296594323;
        WGS84_to_GCJ02.prototype.transform = function (wgLat, wgLon) {

            if (this.outOfChina(wgLat, wgLon)) {
                return [wgLat, wgLon];
            }

            dLat = this.transformLat(wgLon - 105.0, wgLat - 35.0);
            dLon = this.transformLon(wgLon - 105.0, wgLat - 35.0);
            radLat = wgLat / 180.0 * Math.PI;
            magic = Math.sin(radLat);
            magic = 1 - this.ee * magic * magic;
            sqrtMagic = Math.sqrt(magic);
            dLat = (dLat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtMagic) * Math.PI);
            dLon = (dLon * 180.0) / (this.a / sqrtMagic * Math.cos(radLat) * Math.PI);
            mgLat = wgLat + dLat;
            mgLon = wgLon + dLon;

            return [mgLat, mgLon];

        };

        WGS84_to_GCJ02.prototype.outOfChina = function (lat, lon) {

            if (lon < 72.004 || lon > 137.8347)
                return true;
            if (lat < 0.8293 || lat > 55.8271)
                return true;

            return false;

        };

        WGS84_to_GCJ02.prototype.transformLat = function (x, y) {

            var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
            ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
            ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0;
            ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0;

            return ret;

        };

        WGS84_to_GCJ02.prototype.transformLon = function (x, y) {

            var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
            ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
            ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0;
            ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0;

            return ret;

        };


        var x = document.getElementById("err");
        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "用户拒绝对获取地理位置的请求。"
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "位置信息是不可用的。"
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "请求用户地理位置超时。"
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "未知错误。"
                    break;
            }
        }


        var GLatLng = null
        function initialize() {

            console.log(WGS84_to_GCJ02);
            if (navigator.geolocation) {


                navigator.geolocation.getCurrentPosition(function (position) {


                    var coords = position.coords;
                    var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);



                    var GCJ02loc = new WGS84_to_GCJ02().transform(coords.latitude, coords.longitude);

                    latlng = new google.maps.LatLng(GCJ02loc[0], GCJ02loc[1])



                    var map = new google.maps.Map(document.getElementById("map_canvas"), {
                        center: latlng,
                        zoom: 14,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    });

                    //new google.maps.LatLng(GCJ02loc[0], GCJ02loc[1])



                    marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        icon: '../img/mapicon.png'
                    });

                    marker.setMap(map);




                    var infowindow = new google.maps.InfoWindow({
                        content:  '<div class="map-card">' +
								'<p>' +
									'<img class="coverphoto" src="http://static.qyer.com/models/project/place/images/tmp/focusphoto.jpg"/>' +
								'</p>' +
								'<dl>' +
									'<dt class="fontYaHei">' +
										'金门大桥' +
									'</dt>' +
									'<dd>' +
										'<p class="rank">' +
											'<img src="http://static.qyer.com/models/project/place/images/map/icon-rank.png"/>加州活动中排名<em class="yellow">第5位</em>' +
										'</p>' +
										'<p class="detail">' +
											'不可错过：脆皮酱油虾，樱桃番茄、香蒜酱马苏里拉奶酪意式...' +
										'</p>' +
									'</dd>' +
								'</dl>' +
								'<table cellpadding="0" cellspacing="0" border="0" width="100%">' +
									'<tr>' +
										'<td>' +
											'<a href="javascript:void(0)">景点详情</a>' +
										'</td>' +
										'<td>' +
											'<a href="javascript:void(0)">查看周边</a>' +
										'</td>' +
										'<td>' +
											'<a href="javascript:void(0)">加入行程</a>' +
										'</td>' +
									'</tr>' +
								'</table>' +
							'</div>'
                    });

                    google.maps.event.addListener(marker, 'click', function () {
                        infowindow.open(map, marker);
                    });



                  



                }, showError)

            } else {
                alert(' 你的浏览器不支持 geolocation ');
            }
        }






    </script>


    <!---->
    <!--<script src="http://maps.google.cn/maps/api/js?libraries=geometry&sensor=false&key=AIzaSyDzl6F_ZMCEpLimgyeEa20KVQ8Oxhfj16o&callback=initialize" type="text/javascript"></script>-->


    <script src="http://maps.google.cn/maps/api/js?libraries=geometry&sensor=false&callback=initialize" type="text/javascript"></script>

</body>
</html>
